$color-black: #000000;
$color-white: #ffffff;
$color-vip: #7b4801;
$color-vip-text1: #fce5b8;
$color-gray: #d4d4d4;

$color-primary: #305CFF;
$color-regular: #305CFF;
$color-success: #0BB40B;
$color-error: #f56c6c;
$color-linear: linear-gradient(291.62deg, #597EFF 30.1%, #4EC0FF 107.91%);
$color-linear-hover: linear-gradient(291.62deg, #325FFF 30.1%, #56C3FF 107.91%);

$font-size-base: 14px;

$primary-bg-color: #282636;
$primary-bg-color2: #31303b;

$text-color: #333333;
$text-regular-color: rgba($text-color, 0.7);
$text-second-color: rgba($text-color, 0.5);
$text-disabled-color: rgba($text-color, 0.3);


$button-hover-color: #5176FF;
$button-bg-color: rgb($color-primary, 0.1);
$button-hover-bg-color: rgb($color-primary, 0.2);
$button-bg-color-second: rgb($color-primary, 0.05);

$border-color-input: rgba($color-primary, 0.1);
$border-color-input-primary: rgba($color-white, 0.1);
$border-color-primary: $color-primary;
$border-color-split: rgba($text-color, 0.1);
$border-radius: 6px;

$input-bg-color: rgba($color-white, 0.05);
$input-bg-color2: rgba($color-white, 0.1);
$input-border-color: rgba(51, 51, 51, 0.1);
$input-border-active-color: $color-primary;
$star-btn-active: #ffb013;



@forward "element-plus/theme-chalk/src/common/var.scss" with (
  $colors: (
    "primary": (
      "base": $color-primary,
    ),
    "success": (
      "base": $color-success
    ),
    "error": (
      "base": $color-error,
    ),
  ),
  $text-color: (
    "primary": $text-color,
    "regular": $text-regular-color,
    "secondary": $text-second-color,
    "placeholder": $text-second-color,
    "disabled": $text-disabled-color
  ),
  $border-color: (
    (
      "": rgba($text-color, 0.3),
      "light": rgba($text-color, 0.2),
      "lighter": rgba($text-color, 0.1)
    )
  ),
  $checkbox: (
    "text-color": $text-color,
    "input-border": 1px solid $text-color,
  ),
  $input: (
    "text-color": $text-color,
    "hover-border-color": $button-hover-color
  ),
  $common-component-size: (
    'small': 30px
  ),
  $border-radius: (
    'base': 6px
  ),
  // $bg-color: (
  //   "overlay": $color-white,
  // ),

  // $popper: (
  //   "border-radius": 6px,
  // ),
  // $font-size: (
  //   "base": 12px,
  // ),
  // $slider: (
  //   "button-wrapper-size": 14px,
  //   "button-size": 14px,
  //   "button-wrapper-offset": -6px,
  //   "runway-bg-color": #3d3b4a,
  // ),
  $dialog: (
    // "padding-primary": 0px,
    "bg-color": $color-white,
    "border-radius": 10px,
  ),
  // $button: (
  //   "bg-color": $button-bg-color,
  //   "border-color": $button-bg-color,
  //   "hover-bg-color": $button-hover-bg-color,
  //   "hover-border-color": $button-hover-bg-color,
  //   "hover-text-color": $text-color,
  //   "text-color": $text-color,
  // ),
  // $input: (
  //   "border-color": $input-border-color,
  //   "hover-border-color": $input-border-active-color,
  //   "icon-color": $text-color,
  //   "bg-color": $input-bg-color,
  //   "placeholder-color": $text-second-color,
  // ),
  // $message: (
  //   "bg-color": rgba($color-black, 0.8),
  // ),
  // $popover: (
  //   "padding": 0,
  //   "border-radius": 5px,
  //   "border-color": $border-color-input,
  //   "bg-color": $color-white,
  // ),
  $select: (
    'border-color-hover': $button-hover-color,
  ),
  // $border-color: (
  //   "": $border-color-input,
  //   "light": $border-color-input,
  // ),
  $switch: (
    // "on-color": #42bd56,
    "off-color": #CCCBCB,
  ),
  // $select-option: (
  //   "hover-background": $button-bg-color,
  // ),
  // $fill-color: (
  //   "blank": rgba($color-primary, 0.05),
  // ),
  // $radio: (
  //   "font-size": 12px,
  // ),
  // $upload: (
  //   "picture-card-size": 90px,
  // ),
  // $datepicker: (
  //   "border-color": $border-color-input,
  //   "icon-color": $text-color,
  // )
);
